<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title>手风琴菜单</title>
    <link rel="stylesheet" href="./css/style.css" type="text/css" media="screen" />
</head>

<body>
    <div>
        <ul class="accordion">
            <li class="files"><a href="#">My Files<span>495</span></a>
                <ul class="sub-menu">
                    <li><a href="#"><em>01</em>Dropbox<span>42</span></a></li>
                    <li><a href="#"><em>02</em>Skydrive<span>87</span></a></li>
                    <li><a href="#"><em>03</em>FTP Server<span>366</span></a></li>
                    <li><a href="#"><em>04</em>Dropbox<span>1</span></a></li>
                    <li><a href="#"><em>05</em>Skydrive<span>10</span></a></li>
                </ul>
            </li>
            <li class="mail"><a href="#">Mail<span>26</span></a>
                <ul class="sub-menu">
                    <li><a href="#"><em>01</em>Hotmail<span>9</span></a></li>
                    <li><a href="#"><em>02</em>Yahoo<span>14</span></a></li>
                </ul>
            </li>
            <li class="cloud"><a href="#">Cloud<span>58</span></a>
                <ul class="sub-menu">
                    <li><a href="#"><em>01</em>Connect<span>12</span></a></li>
                    <li><a href="#"><em>02</em>Profiles<span>19</span></a></li>
                    <li><a href="#"><em>03</em>Options<span>27</span></a></li>
                    <li><a href="#"><em>04</em>Connect<span>12</span></a></li>
                    <li><a href="#"><em>05</em>Profiles<span>19</span></a></li>
                    <li><a href="#"><em>06</em>Options<span>27</span></a></li>
                </ul>
            </li>
            <li class="sign"><a href="#" class="active">Sign Out</a>
                <ul class="sub-menu">
                    <li><a href="#"><em>01</em>Log Out</a></li>
                    <li><a href="#"><em>02</em>Delete Account</a></li>
                    <li><a href="#"><em>03</em>Freeze Account</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <script src="./js/zepto.js"></script>
    <script>
        // 方法一：
           Zepto(function ($) {
            $(".accordion>li").tap(function () {
                //隐藏所有的sub-menu
                $(".sub-menu").hide();
                $(".accordion>li>a").removeClass("active");
                //给当前li中的a添加样式
                $(this).find("a").addClass("active");
                $(this).find("ul").show();
            });
        });


        /* 方法二：
        Zepto(function ($) {
            let a = $(".accordion>li>a");
            let menu = $(".accordion>li>.sub-menu");
            
            a.tap(function () {
                //移除a的active
                a.removeClass("active");
                $(this).addClass("active");

                //显示自己兄弟元素，隐藏其他兄弟元素
                menu.hide();
                $(this).next().show();
            });
        }); */
    </script>
</body>

</html>